
import React from './react';
import ReactDOM from './react-dom';

class Home extends React.Component {

  constructor(props){
    super(props);
    this.state = {
      num: 0
    }
  }

  componentWillMount() {
    console.log('组件将要加载');
  }
  componentWillReceiveProps(props) {
    console.log('props');
  }
  componentWillUpdate() {
    console.log('组件将要更新');
  }
  componentDidUpdate() {
    console.log('组件更新');
  }

  componentDidMount() {
    console.log('组件加载完成');
  }

  handleClick() {
    // 修改状态的唯一方法是调用setState
    this.setState({
        num: this.state.num + 1
    });
  }

  render() {
    return (
      <div className='active' title='123'>
        hello,<span>react{this.state.num}</span>
        <button onClick={this.handleClick.bind(this)}>点我</button>
      </div>
    );
  }
}
const title = 'active';
console.log(<Home name={title} />);

// 核心：组件化开发

// 两个问题：
// 1. 为什么ReactDOM.render()必须要引入React？
// 2. 组件： 函数组件  类组件
ReactDOM.render(<Home name={title} />, document.querySelector('#root'));

